<template>
	<view class="posire">
		<view style="display: flex;justify-content: center;">
			<view style="display: flex;justify-content: center;position: absolute;z-index: 1;width:80%;margin-top: 20rpx;">
				<view style="color:#fff;">{{turndata.beg}}-{{turndata.end}}</view>
				<image mode="widthFix" class="image " style="position: absolute;z-index: 1;margin-top: 50rpx;" src="/static/img/jiangbg.png"></image>
			</view>
		</view>
		<view>
			<image mode="widthFix" style="position: relative;width:100%;display: flex;" src="/static/img/dakung.png"></image>
			<view style="display: flex;justify-content: center;margin-top: -455rpx;">
				<view @click="begin" class="" style="width:240px;height:80px;position: absolute;z-index: 100;margin-top:-30rpx;"></view>
				<image mode="widthFix" class="image" style="position: relative;width:215rpx" :src="cinum==1?'/static/qiang/kaishi.png':cinum==5?'/static/qiang/wu.png':'/static/qiang/shi.png'"></image>
				
			</view>
			
			<view  style="display: flex;justify-content: center;margin-top: 140rpx;">
				<view style="display: flex;justify-content: center;flex-direction: column;">
					<view style="align-items:center;z-index: 100;color:#fff;position: relative;font-size: 27rpx;display: flex;justify-content: center;margin-bottom:40rpx;">
						<view>
							剩余抽奖次数：{{turndata.times}}次
						</view>
						<view @click="tabhuan" class="" style="color:red;background: #feddb1;padding:3px 10px;border-radius: 10px;font-size: 24rpx;margin-left:30rpx;">
							切换次数
						</view>
					</view>
					
					
					<view style="position: relative;">
						<image mode="widthFix" class="image" style="position: relative;width:659rpx" src="/static/qiang/guize.png"></image>
						<view style="position: absolute;display: flex;top:5px">
							<view @click="navto('/pages/agreement?jiang=1')" style="width: 320rpx;height:50px;"></view>
							<view @click="navto('julu')" style="width: 320rpx;height:50px;"></view>
						</view>
					</view>
				</view>
			</view>
				
		</view>
		
		<view class="zhuanbo" style="justify-content: center;">
			<view class="luck-list " style="position: absolute;width: 600rpx;top: 100rpx;z-index: 60;">
				<view style="margin: 5rpx;" v-for="(item,index) in AwardList" :key="index">
					
					<view class="cell-item mmmm w-b"   :class="index===sel?'y-b':'w-b'" >
						<!-- <image mode="widthFix"  class="zhuand" src="/static/qiang/zhuan.png"></image> -->
						<view class="textvierew flex-ju-c center">
							<view>
								<template
									v-if="item.type == 'product' || item.type == 'customize'">{{item.prize.title}}</template>
								<template v-else-if="item.type == 'score'">
									<view class="flex-a-i">
										<image mode="heightFix" class="image xingg flex mr3" src="/static/img/mm.png">
										</image> {{item.prize.value}}
									</view>
								</template>
								<template v-else>
									<view class="flex-a-i">
										{{item.git}}
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props: {

			// 列表
			AwardList: {
				type: Array,
				default: []
			},
			// 中奖索引
			// sjNum:{
			// 	type:Number,
			// 	default:0
			// },
			turndata: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				allsjNum:[],
				cinum:1,
				jiang: {},
				sjNum: '',
				islottery: true,
				captchaResult: {},
				sel: '',
				FastNums: 0,
				SlowNums: 0,
				time: 1000,
				LoopStatus: true,
				noClick: true
			}
		},
		onLoad() {
 		},
		mounted() {
			
			console.log("444")
		},
		methods: {
			tabhuan(){
				if(this.cinum == 1){
					this.cinum = 5
				}else if(this.cinum == 5){
					this.cinum = 10
				}else{
					this.cinum = 1
				}
			},
			toce() {
				uni.setStorageSync('guize', this.turndata.info.content)
				uni.navigateTo({
					url: "/pages/agreement?choujiang=1"
				})
			},
			// 中奖后的逻辑
			updateMoney(sjNum) {
				this.$emit('updateMoney', this.jiang)
			},
			// 开始抽奖
			begin(captchaResult, index) {
				 // this.sjNum = 3
				 
				 // 		this.sel = ''	 
				 // this.noClick = false;
				 // this.FastNums = 0
				 // this.SlowNums = 0
				 // this.time = 200
				 // this.LoopStatus = true
				 // this.loop()
			
				
				// return
				
					if (!this.noClick) {
						uni.showToast({
							title: '请勿频繁点击',
							icon: "none"
						})
						return
					};
					this.islottery = false
					this.http("/turntable/play", {
						result: 1,
						uuid: 1,
						num:this.cinum
					}, 'post').then(res => {
						// res.data.id = res.data.name.match(/\d+/)
						// if (res.data.id > 4) {
						// 	this.sjNum = res.data.id
						// } else {
						// 	if (res.data.id == 4) {
						// 		this.sjNum = 3
						// 	} else {
						// 		this.sjNum = res.data.id - 1
						// 	}
						// }
						
						this.sjNum = res.data[0].id - 1
						this.allsjNum = res.data

						this.jiang = res.data
						this.noClick = false;
						this.FastNums = 0
						this.SlowNums = 0
						this.time = 200
						this.LoopStatus = true
						this.loop()
					})
					
			},
			// 抽奖过程 控制
			loop() {
				let sjNum = this.sjNum
				
				if (!this.sel || this.sel < 9) {
					
					if (this.sel === ''){
						this.sel = 0
					}else if(this.sel == 8){
						this.sel = 0
					}else {
						this.sel++
					}
					
					this.FastNums++
					if (this.FastNums == 4) {
						this.FastNums = 0
						this.time = 50
						this.SlowNums++
					}
					if (this.SlowNums == 8) {
						this.SlowNums = 0
						this.time = 500
						this.FastNums = 5
					}
					if (this.FastNums > 5) {
						if (this.sel == sjNum) {
							this.noClick = true;
							this.LoopStatus = false
							this.islottery = true
							// 成功的逻辑
							 this.updateMoney(sjNum)
						}
					}
					if (this.LoopStatus) {
						setTimeout(() => {
							this.loop()
						}, this.time);
					}
				}
			}
		}

	}
</script>

<style scoped>
	.mr3 {
		margin-right: 2px;
	}

	.xingg {
		height: 12px;
	}

	.weixz {
		position: absolute;
		bottom: 90rpx;
		right: 70rpx;
	}

	.gguz {
		width: 160rpx;
		height: 60rpx;
	}

	.qingsc {
		margin-top: -150rpx;
	}

	.mmmm {
		position: relative;
	}

	.textvierew {
		position: absolute;
		color: #000;
		width: 160rpx;
		text-align: center;
		top: 110rpx;
		flex-direction: column;
		font-size: 22rpx;
	}

	.zhuand {
		position: absolute;
		width: 170rpx;
	}

	.dianc {
		margin-top: 10rpx;
		width: 10rpx;
	}

	.cccs {
		color: #000;
	}

	.viewav {
		width: 100%;
		position: absolute;
		margin-top: 120rpx;
	}

	.timdfe {
		width: 100%;
		position: absolute;
	}

	.dong {
		width: 413rpx;
		margin-top: -8px;
	}

	.guice {
		height: 320rpx;
		/* background: #FFFFFF; */
		border: 8px solid #1D7ECD;
		border-radius: 20rpx;
	}

	.gongxi {
		width: 194rpx;
	}

	.zhuanbo {
		width: 100vw;
		display: flex;
	}

	/* 抽奖 */
	.luck-list {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.cell-item {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		margin: 5rpx;
		background-image: url('/static/qiang/lipin.png');
		background-size: 100%;
	}

	.cell-content {
		width: 150rpx;
		height: 138rpx;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	
	.y-b{
		background-image: url('/static/qiang/zhuan.png');
	}
</style>